import React, { Component } from 'react'
import './css/option.css'
import Film from './components/film';
import Cinema from './components/cinema';
import Me from './components/me';

export default class App extends Component {
    state = {
        list :[{
            id:0,
            detail:"电影"
        },{
            id:1,
            detail:"影院"
        },{
            id:2,
            detail:"我的"
        }],
        current: 0
    };
    handleClick(index){
      this.setState({
        current: index
      })
    };
    iCanSee(){
      switch(this.state.current){
        case 0:
          return <Film></Film>
        case 1:
          return <Cinema></Cinema>
        case 2:
          return <Me></Me>
        default:
          return null;
      }
    };
  render() {
      var dataList= [this.state.list.map((item, index) =>
          <li key={item.id} className={this.state.current === index? 'active':''} onClick={
            ()=>this.handleClick(index)
          }>
            {item.detail}
          </li>
      )]
    return (
      <div>
          {this.iCanSee()}
          <ul className='option'>
            {dataList}
          </ul>
      </div>
    )
  }
}
